<template>
  <view class="page-bc">
    <view class="page-container">
      <view class="form-card">
        <view class="title">创建球队</view>
        <view class="form-con">
          <view class="form-row">
            <view class="form-info-col">
              <view class="form-item">
                <view class="form-label label-width2"> 球队名称 </view>
                <input
                  class="form-value form-input input-width1"
                  v-model="createForm.teamName"
                />
              </view>
              <view class="form-item">
                <view class="form-label label-width1"> 队长姓名 </view>
                <input
                  class="form-value form-input input-width2"
                  v-model="createForm.captainName"
                />
              </view>
              <view class="form-item">
                <view class="form-label label-width2"> 联系方式 </view>
                <input
                  class="form-value form-input input-width1"
                  v-model="createForm.phone"
                  type="tel"
                />
              </view>
            </view>
            <view class="form-logo-col">
              <image
                v-if="!createForm.teamLog"
                class="logo-img"
                src="@/static/image/team-logo.png"
                mode="aspectFit"
                @click="chooseLogoImage"
              ></image>
              <image
                v-else
                class="logo-img"
                :src="createForm.teamLog"
                mode="aspectFit"
                @click="chooseLogoImage"
              ></image>
              <view class="upload-tip">点击上传</view>
            </view>
          </view>

          <view class="form-warp-item">
            <view class="label">球队近三年荣誉:</view>
            <textarea class="form-input" v-model="createForm.honor"></textarea>
          </view>
        </view>
      </view>
      <view class="protocol-box">
        <view class="protocol-item">
          <accept-box v-model="agree1"
            >我承诺提交报名信息属实并承担一切后果</accept-box
          >
        </view>
        <view class="protocol-item">
          <accept-box v-model="agree2"
            >已阅读并同意《免责协议》《赛事规范》</accept-box
          >
        </view>
      </view>
      <image
        class="img-btn"
        src="https://web.skyelook.com/kf/adidas/miniprogram/创建球队/created@2x.png"
        mode="widthFix"
        @click="triggerSubmit"
      ></image>
    </view>
  </view>
</template>

<script>
import { validation } from '../../utils/validation';
import acceptBox from '../components/acceptBox';
export default {
  components: {
    acceptBox,
  },
  created() {},
  mounted() {},
  data() {
    return {
      agree1: '0',
      agree2: '0',
      createForm: {
        teamName: '',
        captainName: '',
        phone: '',
        honor: '',
        teamLog: '',
      },
    };
  },
  methods: {
    chooseImage() {
      return new Promise((resolve) => {
        uni.chooseImage({
          count: 1, // 允许选择的图片数量
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
          sourceType: ['album', 'camera'], // 从相册或相机选择
          success: (res) => {
            const tempFilePath = res.tempFilePaths[0]; // 获取临时文件路径
            resolve(tempFilePath);
          },
          fail: (err) => {
            console.error('图片选择失败:', err);
            resolve(null);
          },
        });
      });
    },
    async chooseLogoImage() {
      const tempFilePath = await this.chooseImage();
      if (tempFilePath) {
        this.createForm.teamLog = tempFilePath;
      }
    },
    triggerSubmit() {
      const veriRes = validation([
        {
          rule: 'EMPTY',
          value: this.createForm.teamName,
          tip: '请输入球队名称',
        },
        {
          rule: 'EMPTY',
          value: this.createForm.captainName,
          tip: '请输入队长姓名',
        },
        {
          rule: 'MOBILE',
          value: this.createForm.phone,
        },
        {
          rule: 'EMPTY',
          value: this.createForm.honor,
          tip: '请输入球队近三年荣誉',
        },
        {
          rule: 'EMPTY',
          value: this.createForm.teamLog,
          tip: '请上传球队logo',
        },
      ]);
      if (!veriRes.flag) {
        uni.showToast({
          title: veriRes.tip,
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if (!this.agree1) {
        uni.showToast({
          title: '请先承诺提交报名信息属实并承担一切后果',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if (!this.agree2) {
        uni.showToast({
          title: '请先阅读并同意《免责协议》《赛事规范》',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-bc {
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/form-bg.png');
  align-items: center;
  overflow: auto;
}
.form-card {
  width: 100%;
  margin-top: 170rpx;
  padding: 180rpx 40rpx 220rpx;
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/组 8@2x.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  font-family: 'SourceHanSansCN-Bold', 'SimHei', '黑体', sans-serif;
  font-weight: bold;
  color: #000;
  align-items: center;
  & > .title {
    font-size: 54rpx;
    text-align: center;
  }
}
.form-con {
  width: 64vw;
  margin-top: 40rpx;
}
.form-row {
  flex-direction: row;
}
.form-info-col {
  flex-grow: 1;
  margin-right: 20rpx;
  justify-content: space-between;
}
.form-item {
  font-size: 24rpx;
  flex-direction: row;
  align-items: center;
}
.form-label {
  text-align-last: justify;
  position: relative;
  padding-right: 40rpx;
  flex-shrink: 0;
  &::after {
    content: ':';
    display: inline-block;
    position: absolute;
    right: 25rpx;
    bottom: 3rpx;
  }
}
.form-value {
  flex-grow: 1;
}
.label-width2 {
  width: 148rpx;
}
.form-input {
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/矩形 3 拷贝 4@2x.png');
  padding: 10rpx;
  box-sizing: border-box;
}
.input-width1 {
  width: 120rpx;
}
.input-width2 {
  width: 60rpx;
}
.form-logo-col {
  width: 180rpx;
  height: 180rpx;
  position: relative;
  .logo-img {
    width: 100%;
    height: 100%;
  }
  .upload-tip {
    position: absolute;
    height: 30rpx;
    line-height: 30rpx;
    bottom: -40rpx;
    width: 100%;
    text-align: center;
  }
}
.form-warp-item {
  margin-top: 60rpx;
  & > .label {
    margin-bottom: 10rpx;
  }
  & > .form-input {
    height: 150rpx;
    width: 100%;
  }
}
.protocol-box {
  align-items: center;
}
.protocol-item {
  width: 70vw;
}
.img-btn {
  margin: 60rpx 0;
}
</style>
